/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';
//导入json数据
var jasonData = require('./BadgeData.json');
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
//九宫格布局
var cols = 3;
var marginW = 100;
var vMargin = (width-cols*100)/(cols+1);
var hMargin = 25;

export default class nineList extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/*返回6个包包*/}
                {this.returnAllData()}
            </View>
        );
    }
//  返回数据类型
    returnAllData() {
        //  定义数组所装的子控件
        var badgeData = [];
        //    便利数据
        for (var i=0;i < jasonData.data.length;i++) {
            // 单独取出数据
            var allData = jasonData.data[i];
            // 单独装入数据
            badgeData.push(
                <View key={i} style={styles.outView}>
                    <Image source={{uri:allData.icon}} style={styles.imagesStyle}/>
                    <Text style={styles.titlesStyle}>
                        {allData.title}
                    </Text>
                </View>
            )
        }
        return badgeData;
    }
}

const styles = StyleSheet.create({
    container: {
        // flex: 1,
        // justifyContent: 'center',
        // alignItems: 'center',
        // backgroundColor: '#F5FCFF',
        flexDirection:'row',
        flexWrap:'wrap',
    },
    imagesStyle:{
        width:80,
        height:80
    },
    titlesStyle:{

    },
    outView:{
        backgroundColor:'green',
        alignItems:'center',
        width:marginW,
        height:marginW,
        marginLeft:vMargin,
        marginTop:hMargin
    }


});

AppRegistry.registerComponent('nineList', () => nineList);
